.tags_bar {
  gap: 8px;
  display: flex;
  padding: 0 12px;
  align-items: center;
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  border-bottom: 1px solid #efefef;
  .tags_bar_content {
    overflow: scroll;
    padding-left: 6px;
    .tags_item {
      cursor: pointer;
      white-space: nowrap;
      font-size: 12px;
      padding: 1px 8px;
      text-align: center;
      line-height: 24px;
      border-radius: 6px;
      // background-color: #efefef;
      & > * {
        font-size: 12px;
      }
      .item_count {
        color: #2b00ff;
        font-style: italic;
        transform: scale(0.9);
      }
      &:hover {
        background-color: @active-background;
      }
      &_active {
        // cursor: not-allowed;
        white-space: nowrap;
        // border-radius: 6px;
        padding: 1px 8px;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        background-repeat: no-repeat;
        background-image: linear-gradient(@focus-background 100%, @focus-background 100%);
        background-size: 50% 2px;
        background-position: 50% 100%;
        .item_count {
          font-style: italic;
          transform: scale(0.9);
        }
        & > * {
          font-size: 12px;
          color: @text-color-inverse;
        }
        color:  @focus-background;
        // color: @text-color-inverse;
        // background-color: @focus-background;
      }
    }
  }
  .tags_bar_content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
  }
  .tags_bar_content:hover::-webkit-scrollbar-thumb {
    background-color: rgb(231, 229, 229);
  }
}
